<style scoped lang="scss" type="text/scss">
  @import '~variables';

  .line-35{
    line-height: 35px;
  }
  .recharge-img{
    width: 120px;
    @include border;
  }
  .way {
    /deep/ .ivu-radio {
      position: relative;
      top: -13px;
    }
  }
  .ivu-radio-wrapper+.ivu-radio-wrapper{
    margin-left: $xl!important;
  }
  .ivu-radio-wrapper-checked{
    img{
      border-color: $primary;
    }
  }
  .other-radio{
    left: -35px!important;
    margin-top: $m;

    /deep/ .ivu-radio{
      top: 6px;
    }
  }

  @media screen and (min-width: 320px) and (max-width: 768px){
    .other-radio{
      padding-left: 35px!important;
    }
    .ivu-radio-wrapper{
      padding-top: $s;
    }
    .ivu-radio-wrapper+.ivu-radio-wrapper{
      margin-left: 0!important;
    }
  }
  @media screen and (max-width: 345px){
    .bg-gray-1{
      background: #fff;
    }
  }
</style>

<template>
  <div>
    <v-header></v-header>
    <div class="main-style">
      <div class="user-info">
        <ul>
          <li class="font-xm line-35"><span>充值账号：</span><span>{{ username }}</span></li>
          <li class="font-xm line-35"><span>当前余额：</span><span>{{ coin }}阅点</span></li>
        </ul>
      </div>
      <h2 class="margin-top margin-bottom">充值方式</h2>
      <div class="bg-gray-1 padding-l">
        <RadioGroup v-model="way" class="way">
          <Radio v-for="item in wayList" :key="item.value" :label="item.value">
            <img :src="item.url" class="recharge-img">
          </Radio>
        </RadioGroup>
        <div class="margin-top-xl border-top width-100 padding-top-m padding-bottom-m">
          <h3>请选择需要充值的金额</h3>
          <RadioGroup v-model="coins" @on-change="changeCoin">
            <Radio v-for="item in coinList" :key="item" :label="item">
              <div class="inline-block">
                <b>{{ item }}阅点</b>
                <span>{{ item / 100 }}元</span>
              </div>
            </Radio>
            <Radio label="other" class="other-radio">
              <div class="inline-block">
                <span>自定义金额</span>
                <Input type="number" v-model="otherCoin" :disabled="disabled" placeholder="最低30000阅点起充值" style="width: 150px;"></Input>
                <span>阅点</span>
              </div>
            </Radio>
          </RadioGroup>
          <div class="confirm-recharge margin-top-l">
            <b class="font-bold-700 font-xm" v-if="coins === 'other'">充值：<span class="color-red-1">{{ otherCoin }}</span> 阅点（{{ otherCoin / 100 }}元）</b>
            <b class="font-bold-700 font-xm" v-else>充值：<span class="color-red-1">{{ coins }}</span> 阅点（{{ coins / 100 }}元）</b>
          </div>
        </div>
      </div>
      <Button type="success" class="margin-top-m margin-left-l">充值</Button>
    </div>
    <v-footer></v-footer>
  </div>
</template>

<script>
  import alipayImg from '@/assets/images/recharge/alipay.png'
  import wechatImg from '@/assets/images/recharge/wachat.png'

  export default {
    name: '',
    data () {
      return {
        username: '',
        coin: 0,
        way: 'alipay',
        wayList: [
          { url: alipayImg,value: 'alipay' },
          { url: wechatImg, value: 'wechat' }
        ],
        coins: 2000,
        coinList: [2000, 3000, 5000, 10000, 20000],
        otherCoin: '',
        disabled: true
      }
    },
    mounted () {
      this.getUser()
    },
    methods: {
      getUser () {
        this.$http.get('/api/auth/status')
          .then((res) => {
            if (res) {
              this.username = res.user.nickname
              this.coin = res.coin
            }
          })
          .catch((err) => {
            if (err) {
              this.$Modal.error({
                content: '请登录后再进行充值！',
                okText: '去登录',
                onOk: () => {
                  this.$router.push('/login')
                }
              })
            }
          })
      },
      changeCoin (val) {
        if (val === 'other') {
          this.disabled = false
        } else {
          this.disabled = true
        }
      }
    }
  }
</script>
